<template>
	<view>
		<!-- <u-picker :show="screenTime" :columns="columns" :closeOnClickOverlay="sfdfdsa" @close="closeScreen"></u-picker> -->
		<u-picker mode="selector" v-model="screenTime" :default-selector="[0]" :range="columns"></u-picker>
		<view class="search-contaienr">

			<u-search placeholder="请输入订单号查询" @change="InputFocus" clearable="false" :showAction="false" bgColor="#fff"
				v-model="keyword"></u-search>
		</view>

		<view>

			<view class="tab-contaienr">
				<!-- 当v-show="$rule(list[1].isSee)"为false，不显示待处理 -->

				<!-- <u-tabs :list="list" count="cate_count" name="name" :is-scroll="false" :current="current"
					@change="change"></u-tabs> -->
				<!-- {{ filteredlist.length }} -->
				<u-tabs :list="filteredlist" count="cate_count" name="name" :is-scroll="false" :current="current"
					@change="change"></u-tabs>

				<u-badge v-if="todoorderNumber[0] > 0 && filteredlist.length == 6" type="error" :count="todoorderNumber[0]" size="mini"
					:offset="[4, 496]"></u-badge>
			</view>
			<u-badge v-if="todoorderNumber[1] > 0 && filteredlist.length == 6" type="error" :count="todoorderNumber[1]" size="mini"
				:offset="[108, 374]"></u-badge>
			
			<u-badge v-if="todoorderNumber[1] > 0 && filteredlist.length == 5" type="error" :count="todoorderNumber[1]" size="mini"
					:offset="[108, 460]"></u-badge>



			<u-badge v-if="todoorderNumber[2] > 0 && filteredlist.length == 6" type="error" :count="todoorderNumber[2]" size="mini"
				:offset="[108, 250]"></u-badge>
			<u-badge v-if="todoorderNumber[2] > 0 && filteredlist.length == 5" type="error" :count="todoorderNumber[2]" size="mini"
				:offset="[108, 310]"></u-badge>


			<u-badge v-if="todoorderNumber[4] > 0 && filteredlist.length == 6" type="error" :count="todoorderNumber[4]" size="mini"
				:offset="[108, 2]"></u-badge>
			<u-badge v-if="todoorderNumber[4] > 0 && filteredlist.length == 5" type="error" :count="todoorderNumber[4]" size="mini"
				:offset="[108, 8]"></u-badge>

		</view>
		<!-- <view class="screen-container">
			

			<view class="screen-time" @tap="screenTime = true">
				本月 <u-icon name="arrow-down-fill"></u-icon>
			</view>
			<view class="screen-status" @tap="screenTime = true">
				待审核 <u-icon name="arrow-down-fill"></u-icon>
			</view>
		</view> -->
		<!-- <view class="info-card-contaienr">
			<view class="card-item">
				<view class="card-top">
					<view class="item-info">
						<view class="item-title">订单总数</view>
						<view class="item-content">0</view>
					</view>
					<view class="item-info">
						<view class="item-title">提成</view>
						<view class="item-content">0</view>
					</view>
				</view>
				<view class="order-num">
					<view class="item-title">订单笔数：<span class="item-content2">0</span></view>
				</view>
			</view>
		</view> -->

		<view class="order-List">

			<view>
				<div class="order-tiem">

					<u-icon name="calendar" @click="showdate = true"></u-icon>
					<text style="color:#999;" @click="showdate = true">{{ chooseDate }}</text>

					<!-- 321aac{{ $rule(list[1].isSee) }} -->
					<u-icon v-if="chooseDate !== '日期筛选'" name="close-circle" @click.stop="clearDate"></u-icon>
				</div>
				<u-calendar v-model="showdate" :mode="mode" @change="changeDate">
				</u-calendar>

			</view>
			<view v-if="orderList.length > 0">
				<view style="margin-bottom:20rpx" v-for="item in orderList" :key="item.id" @click="onClick(item.id)">
					<view class="order-info">
						<view class="order-title">
							<view>
								<view style="font-weight:600;">
									<!-- {{ item.sell_type === 0 ? '无三大件定制' : (item.sell_type === 1 ? '锂电池' : '其他') }} -->
									客户名称：{{ item.customer_name }}
								</view>
								<view>
									订单编号：{{ item.code }}
								</view>
								<view>
									开单时间：{{ item.billing_time_text }}
								</view>
							</view>
							<view style="">
								<!-- <orderStatusTag v-if="item.status == 0" tagName="待审核" tagColor="yellow"></orderStatusTag>
							<orderStatusTag v-if="item.status == 1" tagName="制作中" tagColor="blue"></orderStatusTag>
							<orderStatusTag v-if="item.status == 2" tagName="已发货" tagColor="green"></orderStatusTag>
							<orderStatusTag v-if="item.status == 3" tagName="已完成" tagColor="blue"></orderStatusTag> -->
								<u-tag :text="getStatusText(item.status)" mode="light" :type="getStatusType(item.status)"
									shape="circle" />
							</view>
						</view>
					</view>
					<view class="cutLine"></view>
					<view class="order-details">
						<view class="left-info">
							<!-- <view>
							类型：{{ item.sell_type == 0 ? '无三大件定制' : (item.sell_type == 1 ? '锂电池' : '其他') }}
						</view>
						<view>
							交货类型：{{ item.type == 1 ? '买家自提' : (item.type == 2 ? '卖方发货' : '代发') }}
						</view> -->
							<view>
								付款方式：{{ item.payment_status === 0 ? '定金+尾款' : '全款' }}
							</view>
							<view>
								总金额：¥ {{ item.real_money }}
							</view>
							<view class="seeMore">
								查看详情
							</view>
							<!-- <view v-if="item.sell_type == 0">
							<view>
								减震颜色：{{ item.shock_absorber_color }}
							</view>
							<view>
								卡钳颜色：{{ item.caliper_color }}
							</view>
							<view>
								轮毂颜色：{{ item.wheel_hub_color }}
							</view>
							<view>
								车壳颜色：{{ item.car_body_color }}
							</view>
						</view>
						<view v-if="item.sell_type == 1">
							<view>
								容量：{{ item.capacity }}
							</view>
							<view>
								车型：{{ item.car_model }}
							</view>
							<view>
								保护板：{{ item.protective_plate }}
							</view>

						</view> -->
						</view>
					</view>
				</view>
			</view>
			<view v-else>
				<u-empty text="暂无数据" mode="message"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			todoorderNumber: [],
			orderBadge: 0,
			chooseDate: '日期筛选',
			showdate: false,
			orderList: [],
			orderForm: {
				oderId: '',
				startTime: '',
				endTime: '',
				status: '0',
				page: '1',
				limit: '1000'
			},
			list: [{
				name: '全部'
			}, {
				name: '待处理',
				isSee: 'order/daichuli'
			},
			{
				name: '制作中',

			},
			{
				name: '已发货'
			},
			{
				name: '已完成'
			},
			{
				name: '待结算',
			},

			],
			statusList: [
				{
					text: '待提交',
					type: 'info',
					index: -2

				}, {
					text: '待生产确认',
					type: 'error',
					index: 2

				}, {
					text: '待财务审核',
					type: 'info',
					index: 0

				}, {
					text: '财务审核失败',
					type: 'error',
					index: 1

				}, {
					text: '待选配',
					type: 'info',
					index: 3
				}, {
					text: '待生产完成',
					type: 'info',
					index: 4
				}, {
					text: '待付尾款',
					type: 'info',
					index: 5
				}, {
					text: '尾款待审核',
					type: 'info',
					index: 6
				}, {
					text: '尾款审核通过 ',
					type: 'success',
					index: 7
				}, {
					text: '尾款审核失败',
					type: 'error',
					index: 8
				}, {
					text: '待发货',
					type: 'info',
					index: 9
				}, {
					text: '已发货',
					type: 'success',
					index: 10
				}, {
					text: '已收货',
					type: 'success',
					index: 11
				}, {
					text: '发起退货',
					type: 'info',
					index: 12
				}, {
					text: '退货成功',
					type: 'success',
					index: 13
				}, {
					text: '订单完成',
					type: 'success',
					index: 14
				}, {
					text: '作废',
					type: 'error',
					index: -1
				}
			],
			current: 1,
			sfdfdsa: true,
			screenTime: false,
		};
	},
	onLoad(options) {
		this.getToDoOrderNumber()

		this.getorderList()

	},
	computed: {
		filteredlist() {
			// 根据 list[1].isSee 的值过滤菜单项
			if (this.$rule(this.list[1].isSee)) {
				// list[1].isSee 为 true，则显示全部菜单项
				return this.list;
			} else {
				// list[1].isSee 为 false，则过滤掉待处理菜单项
				return this.list.filter(item => item.name !== '待处理');
			}
		},
		getStatusText() {
			return function (status) {
				const statusItem = this.statusList.find(item => item.index === status);
				return statusItem ? statusItem.text : '未知状态';
			}
		},
		getStatusType() {
			return function (status) {
				const statusItem = this.statusList.find(item => item.index === status);
				return statusItem ? statusItem.type : 'default';
			}
		}
	},
	methods: {
		getToDoOrderNumber(dateForm) {

			this._post_form('api/ykjp/sell/sell/getOrderListTotalAll', {}, (res) => {
				if (res.code == 1) {

					this.todoorderNumber = res.data.data

				}
			})
		},
		onClick(id) {
			uni.navigateTo({
				url: '/pages/sell/orderdetail?id=' + id
			})
		},
		clearDate() {
			this.chooseDate = '日期筛选'
			this.orderForm.startTime = ''
			this.orderForm.endTime = ''
			this.getToDoOrderNumber()
		},
		InputFocus(e) {

			clearTimeout(this.timer);
			// 清除之前的定时器
			// 创建一个新的定时器
			this.timer = setTimeout(() => {
				console.log('e: ', e)
				this.getsearchList(e)
			}, 500); // 设置防抖延迟时间为500毫秒
		},
		changeDate(e) {

			this.chooseDate = e.startDate + ' 至 ' + e.endDate;
			this.orderForm.startTime = e.startDate
			this.orderForm.endTime = e.endDate


			this.getorderList()
		},
		getsearchList(searchValue) {
			if (searchValue !== '') {
				this.orderForm.oderId = searchValue
				this._post_form('api/ykjp/sell/sell/getOrderList', this.orderForm, (result) => {

					this.orderList = result.data.data


				});

			} else {
				this.orderForm.oderId = ''
				this.getorderList()
			}
		},
		getorderList() {
			this._post_form('api/ykjp/sell/sell/getOrderList', this.orderForm, (res) => {
				if (res.code == 1) {

					console.log('%c [ res.data.data ]-213', 'font-size:13px; background:pink; color:#bf2c9f;', res.data.data)
					this.orderList = res.data.data
					//清除存储的rulelist
				}
			})
		},
		change(index) {
			console.log('%c [ index ]-173', 'font-size:13px; background:pink; color:#bf2c9f;', index)
			this.current = index;
			this.orderForm.status = index - 1
			console.log('%c [ this.orderForm.status ]-385', 'font-size:13px; background:pink; color:#bf2c9f;', this.orderForm.status)

			if(this.filteredlist.length == 5 && index >= 1){
				console.log(321321)
				this.orderForm.status = index

			}
			this.getorderList();
		},
		closeScreen() {
			this.screenTime = false
		}
	}
}
</script>

<style lang="scss" scoped>
.tab-contaienr {
	position: relative;
}

.order-tiem {
	padding: 20upx;
	display: flex;
	gap: 20rpx;
	background-color: #F4F5F7
}

.order-List {
	background-color: #F4F5F7;

	.order-info {
		padding: 20upx;
		background-color: #fff;

		.order-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}

	.order-details {
		padding: 20upx;
		display: flex;
		justify-content: space-between;

		background-color: #fff;

		.left-info {
			width: 100%;

			.seeMore {
				color: #ccc;
				text-align: right;
				font-size: 12px;
				margin-top: 20upx;
			}

			.view {
				margin-bottom: 20upx;
			}
		}
	}
}

.order-num {
	display: flex;
	justify-content: flex-start;

	.item-title {
		font-size: 32rpx;
		color: #B1FAFF;
	}

	.item-content2 {
		font-size: 54rpx;
		color: #fff;
	}
}

.card-top {
	display: flex;
	justify-content: space-between;
}

.info-card-contaienr {
	background-color: #fff;
	padding: 20upx;
}

.card-item {
	background-color: #02CBC5;
	border-radius: 20rpx;
	padding: 40rpx;

	.item-info {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		.item-title {
			font-size: 32rpx;
			color: #B1FAFF;
		}

		.item-content {
			font-size: 54rpx;
			color: #fff;
		}

	}
}

.search-contaienr {
	padding: 20upx;
	background-color: #F4F5F7;
}

.screen-container {
	display: flex;
	border-bottom: 1px solid #E5E5E5;
	justify-content: space-between;
	padding: 20upx;
	background-color: #fff;

	.screen-status {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 50%;

		align-items: center;

		u-icon {
			margin-left: 10upx;
		}
	}

	.screen-time {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 50%;
		border-right: 1px solid #E5E5E5;

		u-icon {
			margin-left: 10upx;
		}
	}
}
</style>
